<template>
	<view>
		<u-sticky bg-color="#fff">
			<u-tabs :list="list1"  :activeStyle="{
        color: '#FABB3C'
    }" :scrollable="false" @click="click"  lineColor="#FABB3C"></u-tabs>
		</u-sticky>
		<view class="box">
			<u-empty v-if="list.length==0"></u-empty>
			<view class="item" v-for="(item,index) in list">
				<view class="quan" >
					<template v-if="item.discountType == 1">
					<view class="one">{{ item.discountPrice }}</view>
					<view class="two" >满{{ item.usePrice }}元可用</view>
					</template>
					<template v-if="item.discountType == 2">
					<view class="one">{{ item.discountPercent }}</view>
					<view class="two" >无门槛</view>
					</template>
				</view>
				<div class="info">
					<div class="title">
						{{item.name}}
					</div>
					<div class="thing">
						<div class="left">
							限“猫猫和狗狗的粮食”购买服务使用
						</div>
						<div class="right" @click="toShop" v-if="status==1">
							去使用
						</div>
						<image src="http://cwht.ricecs.cn/app/mine/cou2.png" style="width: 96rpx;height: 84rpx;margin-left: 24rpx;" v-else-if="status==2"></image>
						<image src="http://cwht.ricecs.cn/app/mine/cou3.png" style="width: 96rpx;height: 84rpx;margin-left: 24rpx;" v-else></image>
					</div>
					<view class="time">{{formatTime(item.validStartTime)}}-{{formatTime(item.validEndTime)}}</view>
				</div>
			</view>
		</view>
	</view>
</template>

<script>
import {couponPage} from '@/services/api/index/cupon'
	export default {
		data() {
			return {
				list1:[{name:'待使用',value:1},{name:'已使用',value:2},{name:'已过期',value:3}],
				tabIndex:0,
        page:1,
        status:1,
        list:[]
			}
		},
    onLoad(){
      this.loadData()
    },
		onReachBottom() {
		
			this.loadData()
		},
		onPullDownRefresh() {
			this.list = []
			this.page = 1
			this.loadData()
			uni.stopPullDownRefresh()
		},
		methods: {
			 formatTime(timestamp) {
			  const date = new Date(timestamp);
			  const year = date.getFullYear();
			  const month = (date.getMonth() + 1).toString().padStart(2, '0');
			  const day = date.getDate().toString().padStart(2, '0');
			  const hours = date.getHours().toString().padStart(2, '0');
			  const minutes = date.getMinutes().toString().padStart(2, '0');
			  const seconds = date.getSeconds().toString().padStart(2, '0');
			  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			click(e){
        this.page=1
        this.list=[]
				this.status=e.value
				this.loadData()
			},
			async loadData(){
        let data={
          pageNo:this.page,
          pageSize:10,
          status:this.status
        }
				const res=await couponPage(data)
				
				this.list=this.list.concat(res.data.list)
			},
			toShop(){
				uni.switchTab({
					url:'/pages/shop/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	.box{
		padding: 20rpx 32rpx;
	}
	.item{
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-bottom: 20rpx;
		.info{
			flex:1;
			padding: 20rpx;
			.title{
				font-weight: 600;
				font-size: 32rpx;
				color: #222222;
				margin-bottom: 8rpx;
			}
			.time{
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 20rpx;
				color: #999999;
			}
			.thing{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-weight: 400;
					font-size: 24rpx;
					color: #555555;
				}
				.right{
						margin-left: 24rpx;
						width: 144rpx;
						height: 56rpx;
						background: #FFFFFF;
						border: 1px solid #FABB3C;
						border-radius: 28rpx;
						font-size: 26rpx;
						color: #FABB3C;
						display: flex;
						align-items: center;
						justify-content: center;
				}
			}
		}
		.quan{
			width: 201rpx;
			height: 212rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 100%;
			background-image: url('http://cwht.ricecs.cn/app/mine/cou.png');
			.one{
				font-weight: bold;
				font-size: 72rpx;
				color: #FFFFFF;

			}
			.two{
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
